<template>
  <div style="position: relative;height: 50%;margin-bottom: 15px;">
    <span class="recognition" style="position: absolute;top: 18px;left: 15px;z-index: 999;"></span>
    <div id="echart" class="echarts-style">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HomeDevicesize',
    props: ['modelCharts'],
    data() {
      return {
        myChart1: null,
        option: {
          title: [{
            text: `设备型号占比：`,
            left: 30,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#333333",
              fontSize: 18,
            },
          }, {
            text: "单位：台",
            right: 20,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#333333",
              fontSize: 18,
            }
          }],
          tooltip: {
            trigger: 'item',
            formatter: '设备型号：{b} <br/>数量：{c}<br/> 占比：{d}%'
          },
          legend: {
             // orient: 'vertical',
            bottom: 0,
            type:'scroll',
           // x:'right',''
            data: []
          },
          series: [{
            type: 'pie',
            radius: '45%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [],
            itemStyle: {
              barBorderRadius: [6, 6, 0, 0], // 重点
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      }
    },
    watch: {
      modelCharts: {
        handler(newVal, oldName) {

            let dataList = []
            let xList = []
            let data = [...newVal]
            xList = data.map(item => {
              dataList.push({
                value: item.ct,
                name: item.model
              })
              return item.model
            })
            this.option.series[0].data = dataList
            this.option.legend.data = xList
            this.myChart1 && this.myChart1.setOption(this.option);
      
        },
        //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
        immediate: true,
        deep: true // 开启深度监听，默认是false
      },
    },
    mounted() {
      let that = this
      this.initDeviceEcharts()
      window.addEventListener("resize", () => {
        // console.log("myChart1")
        that.myChart1.resize()
      })
    },
    methods: {
      initDeviceEcharts() {
        var chartDom = document.getElementById('echart');
        this.myChart1 = this.$echarts.init(chartDom);


        this.myChart1.setOption(this.option);
      },
    }
  }
</script>
<style lang="scss">
  .echarts-style {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #E3E3E5;
    padding: 6px;
  }

  .recognition {
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #78AEF9;
    border-radius: 2px;
    margin-right: 13px;
  }
</style>
